@keyframes dash-animation {
  to {
    stroke-dashoffset: 1000;
  }
}

.network-page {
  position: relative;
}

.network-graph-info {
  margin-bottom: 30px;

  &__wrapper {
    position: absolute;
    top: 20px;
  }

  &__title {
    margin-bottom: 20px;

    &--address {
      font-weight: 400;
      margin-bottom: 5px;
      color: #848484;
    }
    &--name {
      font-size: 24px;
    }
  }

  &__item {
    margin-bottom: 20px;
    &--label {
      font-size: 14px;
      margin-bottom: 5px;
      color: #848484;
    }

    &--value {
      font-size: 24px;
      margin: 0;
      font-weight: 500;
    }
  }
}

.network-graph-legend {
  margin: 60px 0;

  &__title {
    font-size: 14px;
    margin-bottom: 5px;
    color: #848484;
  }

  &__item {
    display: flex;
    margin: 20px 0;
  }

  &__description {
    display: flex;
    align-items: center;
  }

  &__symbol {
    width: 40px;
    display: flex;
    justify-content: center;
  }

  &__sc {
    font-size: 21px;
  }

  &__oracle {
    &--fetching {
      width: 20px;
      height: 20px;
      border: 1px solid #8e8e8e;
      border-radius: 20px;
      background: transparent;
    }

    &--fulfilled {
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background: #2e2a2b;
      border: 1px solid #2e2a2b;
    }
  }

  &__line {
    &--fetching {
      animation: dash-animation 60s infinite linear;
      stroke-dasharray: 2, 6;
      stroke-width: 2;
      stroke-dashoffset: -2;
      stroke-linecap: round;
      stroke: #a0a0a0;
    }

    &--fulfilled {
      stroke-width: 2;
      stroke-linecap: round;
      stroke: #a0a0a0;
    }
  }
}

.network-graph__node-details {
  &__item {
    margin-bottom: 20px;

    &--label {
      font-size: 14px;
      margin-bottom: 5px;
      color: #848484;
    }

    &--value {
      font-size: 20px;
      margin: 0;
      font-weight: 500;
    }
  }
}

.network-graph__contract-details {
  &__item {
    margin-bottom: 20px;

    &--label {
      font-size: 14px;
      margin-bottom: 5px;
      color: #848484;
    }

    &--value {
      font-size: 20px;
      margin: 0;
      font-weight: 500;
    }
  }
}

.answer-history {
  margin: 120px 0;

  svg {
    overflow: visible;
  }

  .x-axis,
  .y-axis {
    .domain,
    line {
      stroke: #c3c3c3;
    }
    text {
      color: #a0a0a0;
    }
  }

  .bollinger {
    &-ma {
      fill: none;
      stroke: #d6dae2;
      stroke-width: 1.5px;
    }

    &-area {
      fill: #e2e5ec;
      opacity: 1;
    }
  }

  &-header {
    font-weight: 200;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &-graph--timestamp,
  &-graph--price {
    font-size: 12px;
    font-weight: 200;
  }
}

.deviation-history {
  margin: 60px 0;

  svg {
    overflow: visible;
  }

  .x-axis,
  .y-axis {
    .domain,
    line {
      stroke: #c3c3c3;
    }
    text {
      color: #a0a0a0;
    }
  }

  &-header {
    font-weight: 200;
    position: relative;
  }

  &-graph--timestamp,
  &-graph--percentage,
  &-graph--price {
    text-anchor: end;
    font-size: 12px;
    font-weight: 200;
  }
}

.oracle-table {
  margin: 120px 0;

  &-header {
    font-weight: 200;
    position: relative;
  }

  .ant-table-placeholder {
    background: transparent;
  }

  .gas-price-info {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #d0d0d0;
    font-size: 16px;
    h4 {
      margin: 0;
    }
  }
}

.vis__wrapper {
  width: 1200px;
  height: 700px;
  margin: 0 auto;
  position: relative;
}

.vis {
  &__oracle {
    fill: #fff;
    stroke: #8e8e8e;
    cursor: pointer;

    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;

    &:hover {
      fill: #2a59da;
      stroke: #2a59da;
    }

    &--pending {
      fill: #fff;
      stroke: #8e8e8e;
    }

    &--fulfilled {
      fill: #2d2a2b;
      stroke: #2d2a2b;
    }
  }

  &__oracle-label {
    fill: #505050;
    font-size: 12px;
  }

  &__tooltip {
    position: absolute;
    padding: 15px 20px;
    background: white;
    border: 1px solid #ececec;
    pointer-events: none;
    min-width: 120px;
    color: #2d2a2b;

    .type {
      text-transform: capitalize;
      color: #939598;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #bcbec0;
      font-size: 14px;
    }

    .data {
      margin: 10px 0;
      font-size: 16px;
      line-height: 1.5;
    }

    .meta {
      margin: 10px 0;
      font-size: 12px;
      line-height: 1.5;
    }
  }

  &__contract {
    cursor: pointer;
    fill: #fff;
    stroke: #8e8e8e;
  }

  &__line {
    stroke: #bdbdbd;
    stroke-width: 1;
    &--pending {
      animation: dash-animation 20s infinite linear;
      stroke-dasharray: 1, 8;
      stroke-width: 2;
      stroke-dashoffset: 0;
      stroke-linecap: round;
      stroke: #a0a0a0;
    }
  }
}
